<template>
  <div class="main">
    <div class="cards">
      <div class="card-container" v-for="(award,i) in tableData" :key="award.id"  :class="i===tableData.length-1?'finalCard':''">
        <router-link  :to="{path: '/Admin/UpdateAward', query:{id: award.id}}" style="text-decoration: none">
          <div class="card">
            <img  style="height: 60px;width: auto;  border-radius: 5px;" src="../../../public/image/login/校1.png" class="card-cnt__icon" />
            <div class="card-cnt__title">{{award.title}}</div>
            <div class="card-cnt__detail">
                奖项名额：{{award.number}}人
            </div>
            <div class="card-cnt__detail">
                参选资格：前{{award.standard}}%
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="foot">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="paginations.page_index"
                     :page-sizes="paginations.page_sizes"
                     :page-size="paginations.page_size"
                     :layout="paginations.layout"
                     :total="paginations.total">
      </el-pagination>
    </div>
  <suspension-ball></suspension-ball>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import SuspensionBall from "./suspensionBall.vue";

export default {
  name: "Admin",
  components: {SuspensionBall},
  data() {
    return {
      searchText:'',
      tableData: [
      ],
      allTableData: [],
      paginations: {
        page_index: 1, //当前页面
        total: 0,      //总页数
        page_size: 4,  //每页显示的记录条数
        page_sizes: [4, 8, 12, 16],  //可选择的page_size范围
        layout: "total, sizes, prev, pager, next, jumper"  //翻页属性
      },
      //悬浮按钮
      isLoading: false,
      flags: false, //控制使用
      position: {
        x: 0,
        y: 0,
      },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
    }
  },
  methods: {
    loadAwards() {
      this.$axios.get("/award/SelectAllAward")
          .then(success => {
            if (success.data.code === 200) {
              this.allTableData = success.data.data
              this.setPaginations();
            } else {
              ElMessage({
                message:success.data.message,
                type:'error'
              })
            }
          })
          .catch(fail => {
            console.log(fail);
          })
    },
    handleSizeChange(page_size) {
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      this.paginations.page_index =page;
      let index = this.paginations.page_size * (page - 1);
      let nums = this.paginations.page_size * page;
      let tables = [];   // 存储跳转页面要显示的记录
      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) {
          tables.push(this.allTableData[i]);
        }
        this.tableData = tables;
      }
    },
    setPaginations() {
      this.paginations.total = this.allTableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 8;
      //设置默认的分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    }
  },
  created() {
    this.loadAwards()
  },
  mounted() {

  }
}
</script>

<style scoped>
.main {
  margin:20px;
}
.cards {
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  flex-wrap: wrap;
  min-height: 565px;
}
.card-container {
  width: 23%;
  height: 280px;
  padding: 7px 16px;
  box-sizing: border-box;
}
.card {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.20);
  border-radius: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.35);
  transition-duration: 0.5s;
}
.card-cnt__icon {
  height: auto;
}

.card-cnt__title {
  font-family: PingFangSC-Medium;
  font-weight: bold;
  font-size: 20px;
  color: #0a5fad;
  letter-spacing: 0;
  text-align: center;
  line-height: 25px;
  padding-top: 30px;
  margin-bottom: 50px;
}
.card-cnt__detail {
  margin-bottom: 20px;
  color: #2f3238;
  font-size: 15px;
  font-weight: bold;
}
.foot {
}
</style>